<template>
  <div class="ipage page-home">
    <!-- home -->
    <Header :title="headerTitle" :showBackBtn="!$route.meta.isRoot"></Header>
    <!-- section 每日推荐 -->
    <main class="home-main">
      <div class="scroll-wrapper">
        <router-view></router-view>
      </div>
    </main>
    <NavTabbar :navItems="navItems" />
  </div>
</template>

<script lang="ts">
import { defineComponent, toRef } from 'vue'
import { SysState } from '../store/sys';
import Header from '@/components/base/Header.vue';
import NavTabbar from '@/components/base/Navtabbar.vue';
import UserFunc from '@/components/pages/home/UserFunc.vue';

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    if (!SysState.userInfo) {
      return next({
        name: '用户登录'
      });
    }
    return next();
  },
  beforeRouteUpdate(to, from, next) {
    this.headerTitle = to.meta?.headerTitle as string ?? '';
    return next()
  },
  setup() {
    const navItems: NavItem[] = [
      {
        icon: 'src/assets/img/tab-home.png',
        path: '/home',
      },
      {
        icon: 'src/assets/img/tab-game.png',
        path: '/home/game',
      },
      {
        icon: 'src/assets/img/tab-share.png',
        path: '/home/share',
      },
    ];

    return {
      navItems,
      headerTitle: toRef(SysState, 'headerTitle')
    }
  },
  beforeCreate() {
    SysState.headerTitle = this.$route.meta?.headerTitle as string ?? '';
  },
  components: {
    Header,
    UserFunc,
    NavTabbar,
  },
  computed: {
    // headerTitle() {
    //   return this.$route.meta?.headerTitle as string ?? '';
    // }
  }
})
</script>


<style lang="stylus" scoped>
@import '../styles/mixin.styl'

.page-home
  Flex(column, flex-start, stretch)
  height 100vh
  
.home-main
  height calc(100% - 2.16rem - 1.88rem)
  overflow-y scroll
  .scroll-wrapper
    padding .24rem .48rem
    height 100%
    overflow-y scroll


  
</style>